import React from 'react';
import Cubox from './Cubox';
import styles from './CuboxInput.module.css';
import colorScheme from './color-scheme';

const CuboxInput = ({ value = "", onChange, isDisabled, type, color = 'blue', children, style, delimiter, dimmedColor, ...props }) => {

  const [isFocused, setIsFocused] = React.useState(false);

  const [back, fore] = isDisabled
    ? ['base01', 'base01']
    : [color, 'base00'];

  const QBOXProps = {
    style,
    cornerRadius: 20,
    strokeWidth: 1,
    isOutlined: true,
    backColor: isFocused ? colorScheme[back] : (dimmedColor ?? colorScheme[back]),
    foreColor: colorScheme[fore],
  };

  const inputProps = {
    spellCheck: false,
    value,
    onChange,
    className: `${styles['input']} ${styles[`input-${type}`]}`,
    style: {
      color: colorScheme['base06'],
    },
    type,
    disabled: isDisabled,
    ...props,
    onFocus: (e) => {
      setIsFocused(true);
      if (props.onFocus) props.onFocus(e);
    },
    onBlur: (e) => {
      setIsFocused(false);
      if (props.onBlur) props.onBlur(e);
    },
  }

  return <Cubox {...QBOXProps} >
    <div>
      <input {...inputProps}>{children}</input>
    </div>
  </Cubox>
}

export default CuboxInput;